
<template>
  <div class="sn-body">
    <div class="wrap-container">

      <div class="table">
        <table border="0" cellpadding="0" cellspacing="0" class="table-header">
          <tbody>
            <tr>
              <td width="30%">
                <span>报警类型</span>
              </td>
              <td width="20%">
                <span>报警地点</span>
              </td>
              <td width="20%">
                <span>处理情况</span>
              </td>
              <td width="30%">
                <span>报警时间</span>
              </td>
            </tr>
          </tbody>
        </table>

        <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
          <table border="0" cellpadding="0" cellspacing="0" class="item">
            <tbody>
              <tr v-for="(item, index) in listData" :key="index">
                <td width="30%">
                  <span>{{ item.type }}</span>
                </td>
                <td width="20%">
                  <span>{{ item.address }}</span>
                </td>
                <td width="20%">
                  <span :class="{ colorRed: item.done, colorOrange: !item.done }">{{ item.done ? '已处理' : '未处理'
                  }}</span>
                </td>
                <td width="30%">
                  <span>{{ item.date }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </vue-seamless-scroll>
      </div>

    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },

  data() {
    return {
      listData: [
        { type: '火灾报警', address: '上海市浦东区', done: true, date: '2024-01-01 08:00' },
        { type: '入侵报警', address: '北京市朝阳区', done: false, date: '2024-01-02 09:30' },
        { type: '紧急医疗', address: '广州市天河区', done: true, date: '2024-01-03 10:15' },
        { type: '交通事故', address: '深圳市南山区', done: false, date: '2024-01-04 11:45' },
        { type: '火灾报警', address: '杭州市西湖区', done: true, date: '2024-01-05 12:00' },
        { type: '公共纠纷', address: '苏州市工业园区', done: false, date: '2024-01-06 14:20' },
        { type: '入侵报警', address: '成都市锦江区', done: true, date: '2024-01-07 15:50' },
        { type: '火灾报警', address: '武汉市江岸区', done: false, date: '2024-01-08 16:30' },
        { type: '公共纠纷', address: '南京市玄武区', done: true, date: '2024-01-09 17:05' },
        { type: '紧急医疗', address: '重庆市渝中区', done: false, date: '2024-01-10 18:00' },
        { type: '交通事故', address: '天津市和平区', done: true, date: '2024-01-11 19:20' },
        { type: '火灾报警', address: '西安市碑林区', done: false, date: '2024-01-12 20:30' },
        { type: '入侵报警', address: '青岛市市南区', done: true, date: '2024-01-13 21:45' },
        { type: '公共纠纷', address: '大连市中山区', done: false, date: '2024-01-14 22:10' },
        { type: '紧急医疗', address: '沈阳市沈河区', done: true, date: '2024-01-15 23:30' }
      ]
    };
  },

  computed: {
    optionSetting() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
  },

  mounted() { },

};
</script>
<style lang='scss' scoped>
.sn-body {
  %table-style {
    margin-top: 30px;
    width: 100%;
    height: 35px;
    table-layout: fixed;

    tr {
      td {
        padding: 10px 5px;
        text-align: center;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        color: #E2E5FF;
        font-size: 14px;
      }
    }
  }

  .table {
    .table-header {
      @extend %table-style;
    }

    .seamless-warp {
      height: 400px;
      overflow: hidden;
      visibility: visible;

      .colorRed {
        color: #FF4669;
      }

      .colorOrange {
        color: #FFC956;
      }

      .item {
        height: auto;
        @extend %table-style;

        tr {
          td {
            &.title {
              text-align: center;
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }

  }
}
</style>
